<template>
    <Echart id="leftCenter1" :options="options" class="left_center_inner"  ref="daycharts1" />
  </template>
  
  <script>
  import { currentGET } from 'api/modules'
  export default {
    data() {
      return {
        options: {},
        countUserNumData: {
          lockNum: 0,
          onlineNum: 0,
          offlineNum: 0,
          totalNum: 0
        },
        pageflag: true,
        timer: null
      };
    },
    created() {
      this.getData()
    },
    mounted() {
    },
    beforeDestroy() {
      this.clearData()
  
    },
    methods: {
      clearData() {
        if (this.timer) {
          clearInterval(this.timer)
          this.timer = null
        }
      },
      getData() {
        this.pageflag = true
        // this.pageflag =false
  
        currentGET('big1').then(res => {
          //只打印一次
          if (!this.timer) {
            console.log("设备总览", res);
          }
          if (res.success) {
            this.countUserNumData = res.data
            this.$nextTick(() => {
              this.init()
            })
  
          } else {
            this.pageflag = false
            this.$Message({
              text: res.msg,
              type: 'warning'
            })
          }
        })
      },
      //轮询
      switper() {
        if (this.timer) {
          return
        }
        let looper = (a) => {
          this.getData()
        };
        this.timer = setInterval(looper, 2000);
        let myChart = this.$refs.charts.daycharts1
        myChart.on('mouseover', params => {
          this.clearData()
        });
        myChart.on('mouseout', params => {
          this.timer = setInterval(looper, 2000);
        });
      },
      init() {    
        let colors = ["#ECA444", "#33A1DB", "#56B557"];
        this.options =  {
        color:colors,
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["效率"],   //数组 方式
          textStyle: { color: "#fff" },
        },
        grid: {   //设置 上下左右间距
          top: "50",
          left: "10",
          right: "10",
          bottom: "0",
          containLabel: true,
        },
        xAxis: {      //X 轴 配置
          axisLabel: {
            fontSize: 10,
            color: "#fff",
            showMinLabel: true,
            showMaxLabel: true,
          },
          axisLine: {
            lineStyle: { color: "#fff", width: 1 },
            lineStyle: {
              color: "#fff",              // X 轴颜色配置
            },
          },
          type: "category",
          boundaryGap: false
        },
        yAxis: [
          {
            type: "value",
            // name: '温度', 
            max: 40,
            min:-10,
            interval:10,
            axisLabel: {
              formatter: "{value} %",
              color: "#fff",
            },
          }
        ],
        series: [
          {
            name: "效率",
            type: "line",
symbol: "none",
             //点样式
                      itemStyle: {
              color: "#5083FF",
            },
            label: {
              show: true,
            },
            data: [10,30,40,50,20,33,11,44],
          },
        ],
      }        
      },
    },
  };
  </script>
  <style lang='scss' scoped>
  </style>